<template>
<div class="shopcar">
  <div class="carTitile" v-if="currentProductCar.length>0">
    <div class="storeDiv">
      <img src="/static/images/shopcar/store.png">
    </div>
    <p>我的购物结算</p>
  </div>
  <div class="shopcarItemAll" v-if="currentProductCar.length>0">
    <shopcar-item v-for="item in currentProductCar" :key="item.lineItemId" :shopcarItem='item'></shopcar-item>
  </div>
  
  <div v-if="currentProductCar.length === 0" class="lackShopCarPage">
    <div class="lackShopCarPageTxt">
      <div><img src="/static/images/lack/lackShopCar.png"></div>
      <p>购物车空空如也~</p>
    </div>
  </div>
  <div v-if="currentProductCar.length>0">
    <shopcar-bottom></shopcar-bottom> 
  </div>
</div>
</template>

<script>
  import shopcarItem from '@/components/shopcar/shopcar-item'
  import shopcarBottom from '@/components/shopcar/shopcar-bottom'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      shopcarItem,shopcarBottom
    },
    props: {
      shopName: { //商品名称
        type: String,
        required: true
      },
      shopPrice: { //商品价格
        type: Number,
        required: true
      },
      shopStandard: {//商品规格
        type: Number,
        required: true
      },
    },
    computed : {
      ...mapGetters([
        'currentProductCar'
      ]),
    },
    onShow() {
      console.log('购物车的商品',this.currentProductCar)
      wx.getStorageSync('type','normal')
    },
  }
</script>

<style scoped>
.shopcar{
  background: #efeff4;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.carTitile{
  display: flex;
  align-items: center;
  height: 90rpx;
  font-size: 28rpx;
  color: #9e9e9e;
  padding: 0 30rpx;
  border-top: 1rpx solid #efeff4;
  background: #fff;
}
.carTitile .storeDiv{
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}
.carTitile .storeDiv img{
  width: 100%;
  height: 100%;
}
.shopcarItemAll{
  padding-bottom: 110rpx;
}
.lackShopCarPage{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackShopCarPage .lackShopCarPageTxt div{
  width: 220rpx;
  height: 156rpx;
  margin: 0 auto;
}
.lackShopCarPage .lackShopCarPageTxt div img{
  width: 100%;
  height: 100%;  
}
.lackShopCarPage .lackShopCarPageTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
</style>
